<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-07-23 11:27:08
 * @LastEditTime: 2024-08-02 17:44:22
 * @FilePath: src/views/sxln/member/MemberDetail.vue
 * @Description: 
 -->
<script setup lang="ts">
import {lnMemberApi} from "@/views/sxln/api/LnMemberApi";
import {useDetail} from './LnMemberHooks'
import {message} from "ant-design-vue";
import {ref} from "vue";

const {getMemberById} = lnMemberApi()

const {
  form,
  entranceTimePicker,
  submitting,
  submitForm,
  handleClick,
  uploadPhoto,
  fileList,
  photoObj
} = useDetail()

let open = ref(false)
const callback = defineEmits(["submitCallback"])
const handleOk = () => {
  submitForm().then(res => {
    if (res.code == 0)
      setTimeout(() => {
        open.value = false
        callback("submitCallback")
        submitting.value = false
      }, 1000)
    else
      submitting.value = false
  }).catch(err => {
    console.debug(err)
    message.error("提交失败")
    submitting.value = false
  })
}
const handleCancel = () => {
  open.value = false
}
const openAdd = () => {
  open.value = true
  form.value = {}
}
const openEdit = (id: string) => {
  getMemberById(id).then(res => {
    form.value = res.data
    open.value = true
  }).catch(err => {
    message.error("获取会员信息失败")
  })
}
defineExpose({
  openAdd,
  openEdit
})
</script>

<template>
  <!--  <a-form >-->
  <!--    <a-form-item label="Field A">-->
  <!--      <a-input v-model:value="form.a" placeholder="input placeholder" />-->
  <!--    </a-form-item>-->
  <!--    <a-form-item label="Field B">-->
  <!--      <a-input v-model:value="form.b" placeholder="input placeholder" />-->
  <!--    </a-form-item>-->
  <!--    <a-form-item wrapper-col="{ span: 14, offset: 4 }">-->
  <!--      <a-button type="primary">Submit</a-button>-->
  <!--    </a-form-item>-->
  <!--  </a-form>-->
  <div>
    <a-modal v-model:open="open" title="会员信息维护" width="30rem" :maskClosable="false">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button :loading="submitting" key="submit" type="primary" @click="handleOk">录入</a-button>
      </template>
      <a-form :disabled="submitting" :label-col="{span:5}" :wrapper-col="{span: 18}" label-align="right">
        <a-form-item label="照片">
          <a-upload
              v-model:file-list="fileList"
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :before-upload="uploadPhoto.beforeUpload"
              @change="uploadPhoto.handleChange"
              :custom-request="uploadPhoto.upload"
          >
            <img v-if="photoObj.fileName"
                 style="width: 100%"
                 :src="'http://127.0.0.1:9008/'+photoObj.bucket+'/'+photoObj.fileKey + photoObj.fileName" alt="avatar"/>
            <!--          <div v-else>-->
            <!--            <loading-outlined v-if="loading"></loading-outlined>-->
            <!--            <plus-outlined v-else></plus-outlined>-->
            <div v-else class="ant-upload-text">Upload</div>
            <!--          </div>-->
          </a-upload>
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-model:value="form.realName" placeholder="请输入姓名"/>
        </a-form-item>
        <a-form-item label="会员证编号">
          <a-input v-model:value="form.memberId" placeholder="请输入会员证编号"/>
        </a-form-item>
        <a-form-item label="笔名">
          <a-input v-model:value="form.penName" placeholder="请输入笔名"/>
        </a-form-item>
        <a-form-item label="性别">
          <a-input v-model:value="form.sex" placeholder="请输入性别"/>
        </a-form-item>
        <a-form-item label="会员类别">
          <a-input v-model:value="form.memberType" placeholder="请输入会员类别"/>
        </a-form-item>
        <a-form-item label="入会时间">
          <a-date-picker v-model:value="entranceTimePicker" placeholder="请选择入会时间"/>
        </a-form-item>
        <a-form-item label="操作">
          <a-button type="primary" @click="handleClick">click</a-button>
          {{ form.entranceTime }}
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.ant-form-item {
  padding: .5rem;
}
</style>